<!doctype html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>elmDesign-plus</title>
		<style>
      .app-loading {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: #f0f2f5;
      }

      .app-loading .app-loading-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        transform: translate3d(-50%, -50%, 0);
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .app-loading .app-loading-item {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 60px;
        vertical-align: middle;
        border-radius: 50%;
      }

      .app-loading .app-loading-outter {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 4px solid #2d8cf0;
        border-bottom: 0;
        border-left-color: transparent;
        border-radius: 50%;
        animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
      }

      .app-loading .app-loading-inner {
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 20px);
        width: 40px;
        height: 40px;
        border: 4px solid #87bdff;
        border-right: 0;
        border-top-color: transparent;
        border-radius: 50%;
        animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
      }

      @-webkit-keyframes loader-outter {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes loader-outter {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      @-webkit-keyframes loader-inner {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(-360deg);
        }
      }

      @keyframes loader-inner {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(-360deg);
        }
      }
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 加载界面 -->
      <div class="app-loading">
        <div class="app-loading-wrap">
          <div class="app-loading-item">
            <div class="app-loading-outter"></div>
            <div class="app-loading-inner"></div>
          </div>
        </div>
      </div>
		</div>
		<script src="/externalConfig.js"></script>
		<script type="module" src="./examples/main.ts"></script>
	</body>
</html>
